import React, { Component } from "react";
import Headcom from "../../components/header"
import "./index.css"

import { getAddress } from "../../api/user";

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        let { id } = JSON.parse(localStorage.getItem("userinfo"));
        getAddress(id).then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }
    render() {
        return (
            <div className="address">
                <Headcom title="收货地址" />
                <ul>
                    {this.state.data.map(item => {
                        return <li key={item.id}>
                            <span className="user">{item.user}</span>
                            {item.active==="true" ? <em>默认</em> : null}
                            <div>
                                <p className="tel">{item.tel}</p>
                                <p>{item.city}{item.address}</p>
                            </div>
                            <span className="edit" onClick={()=>{this.props.history.push("/editaddress/"+item.id)}}></span>
                        </li>
                    })}
                </ul>

                <span className="addbtn" onClick={() => {
                    this.props.history.push("/addaddress")
                }}>新增收货地址</span>
            </div>
        )
    }
}

export default Index